.bbx-box {
  display: flex;
  justify-content: space-between;
  background-color: #22292e;
  height: calc(100vh - 70px);
  overflow-y: hidden;
}
.bbx-sider {
  width: 200px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  .menu-item {
    background: #738884;
    border-radius: 5px;
    height: 38px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    .menu-icon{
      width: 16px;
      height: 16px;
    }
    .title{
      margin: 0 20px;
    }
  }

  .fixed-menu-item{
    width: 200px;
    background: linear-gradient(270deg,#ffc8e0 0%, #ffedf5 100%);
    border-radius: 5px;
    height: 38px;
    color: #E6257A;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    left: 20px;
    .menu-icon{
      width: 16px;
      height: 16px;
    }
    .title{
      margin: 0 20px;
    }
  }
}
.bbx-main {
  flex: 1;
  flex-shrink: 0;
  padding: 20px;
  overflow: auto;
}
.bbx-main-title {
  margin-top: 45px;
  margin-bottom: 22px;
}
.bbx-main-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .bbx-main-list-item {
    width: calc(20% - 10px);
    background: #ffffff;
    border-radius: 10px;
    .top {
      height: 164px;
      background: #ccc;
      position: relative;
      border-radius: 10px 10px 0 0;
      .tags {
        position: absolute;
        display: flex;
        align-items: center;
        padding: 6px 8px;
        .tag {
          height: 18px;
          background: #ffffff;
          border-radius: 3px;
          padding: 0 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 13px;
          font-weight: 500;
          color: #f72a2a;
          margin-right: 10px;
        }
      }
    }
    .flag {
      height: 22px;
      font-size: 16px;
      font-weight: 500;
      color: #ff5500;
      line-height: 19px;
      margin: 10px;
    }
    .title {
      display: flex;
      align-items: center;
      height: 22px;
      font-size: 16px;
      font-weight: 500;
      color: #333333;
      line-height: 19px;
      padding: 0 8px;
      > img {
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
      > span {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
      }
    }
    .desc {
      font-size: 13px;
      font-weight: 400;
      text-align: LEFT;
      color: #888888;
      margin-top: 6px;
      padding: 0 8px;
    }
    .footer {
      display: flex;
      align-items: center;
      padding: 10px 8px;
      > span {
        font-size: 13px;
        font-weight: 400;
        color: #888888;
      }
      .images {
        display: flex;
        align-items: center;
        > img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
      }
    }
  }
}
